<template>
  <div class="carTracked">
    <div class="carShow" @click="showCar" :class="[carShow ? 'active' : '']"></div>
    <div class="carContainer" v-show="carShow">
      <div class="carTitle">车辆轨迹</div>
      <!-- <div class="realtime" @click="ifNowTime" :class="[nowIndex === 1 ? 'active' : '']">位置</div> -->
      <div class="carNumber">
        <div class="carLabel">车牌号</div>
        <div class="carSelect">
          <el-select
            v-model="valueSearch"
            filterable
            remote
            reserve-keyword
            placeholder="请选择或输入"
            remote-show-suffix
            :remote-method="remoteMethod"
            :loading="loading"
            @change="carnumChange"
          >
            <el-option
              v-for="item in filterOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
              <span
                :style="[
                  item.type === '1'
                    ? 'background:#10F4B6;box-shadow:0 0 10px #10F4B6'
                    : 'background:#F44B10;box-shadow:0 0 10px #F44B10'
                ]"
                class="carListsearch"
              ></span>
              <span style="float: left">{{ item.value }}</span>
            </el-option>
          </el-select>
        </div>
      </div>
      <div class="carTime">
        <div class="carLabel">创建时间</div>
        <div class="carDate">
          <el-date-picker
            v-model="dateValue"
            type="datetimerange"
            range-separator="To"
            start-placeholder="Start date"
            end-placeholder="End date"
          />
        </div>
      </div>
      <div class="carButton">
        <div class="search" @click="handleSearch">搜索</div>
        <div class="back" @click="rebackValue">重置</div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'
import { ElMessage } from 'element-plus'
import { Http } from '@/http/index'
import { formatTime } from '@/utils/index'
import carPoint from '@/assets/images/car/carPoint.png'
import { addPoint, clearPoint, clearpanelAll } from '@/utils/map'
import { carTracekd, PolylineAntialiasingMaterialProperty, clearCarModel } from '@/utils/myCesium'
import { carVideoStore } from '@/stores/carMessage'
let carHandler = carVideoStore()
let queryTimeout = null
const loading = ref(false)
let options = [
  {
    value: '数据加载中',
    label: '数据加载中'
  }
]
let valueSearch = ref('')
const filterOptions = ref([
  {
    value: '数据加载中',
    label: '数据加载中'
  }
])
let carShow = ref(true)
const dateValue = ref([new Date(), new Date()])
//记录实时状态
let nowIndex = ref(0)
onMounted(() => {
  // carLogin()
  getCarList()
})
onBeforeUnmount(() => {
  if (queryTimeout) {
    clearTimeout(queryTimeout)
    queryTimeout = null
  }
})
//获取车辆列表
const getCarList = async () => {
  let data = await Http.carList()
  if (data.code === 200) {
    options = []
    data.result.forEach((item, index) => {
      options.push({ value: item.carlicence, label: item.carlicence, type: item.type })
    })
    let newArr = options.filter((item, index) => {
      return item.type === '1'
    })
    let newArr1 = options.filter((item, index) => {
      return item.type === '0'
    })
    options = [...newArr, ...newArr1]
    filterOptions.value = options
  }
}
const remoteMethod = (query) => {
  if (queryTimeout) {
    clearTimeout(queryTimeout)
    queryTimeout = null
  }
  if (query) {
    loading.value = true
    queryTimeout = setTimeout(() => {
      loading.value = false
      filterOptions.value = options.filter((item) => {
        return item.label.toLowerCase().includes(query.toLowerCase())
      })
    }, 200)
  } else {
    filterOptions.value = options
  }
}
const showCar = () => {
  carShow.value = !carShow.value
}
let preNum = { gpslng: 0, gpslat: 0 }
const handleSearch = () => {
  if (valueSearch.value === '') {
    ElMessage.error('请选择车牌号')
  } else {
    clearCarTracked()
    let a = formatTime(dateValue.value[0], 'carTime')
    let b = formatTime(dateValue.value[1], 'carTime')
    Http.carDetail({ car: valueSearch.value, startTime: a, endTime: b }).then((res) => {
      if (res.code === 200) {
        if (res.result.length === 0) {
          ElMessage.error('该时间段内车辆轨迹为空')
        } else {
          let newArr = []
          res.result.forEach((item, index) => {
            if (
              Number(preNum.gpslng) != Number(item.gpslng) &&
              Number(preNum.gpslat) != Number(item.gpslat)
            ) {
              newArr.push({
                x: Number(item.gpslng),
                y: Number(item.gpslat),
                z: 80,
                time: index * 30
              })
              preNum = { gpslng: item.gpslng, gpslat: item.gpslat }
            }
            // newArr.push({ x: Number(item.gpslng), y: Number(item.gpslat), z: 80, time: index * 30 })
          })
          // let data = [
          //   {
          //     id: 'trackedCar',
          //     attributes: {},
          //     position: newArr
          //   }
          // ]
          // let options = {
          //   isZoom: true,
          //   style: {
          //     color: 'rgb(0,255,0,0.9)',
          //     transparency: 0.3,
          //     outline: true,
          //     outlineColor: 'rgb(8,236,171)',
          //     perPositionHeight: false,
          //     height: 65,
          //     image: streetLine
          //   }
          // }
          // // window.jMap.hideBuildingModel()
          // window.jMap.LightEffect.roadLine(data, options)
          // let a = window.jMap._viewer.entities.getById('RoadLine_trackedCar')
          // a._polyline._material.duration = 20000
          let target = {
            id: 'trackedCar',
            attributes: {
              name: '测试轨迹分布'
            },
            position: newArr
          }
          let options = {
            isZoom: true,
            style: {
              width: 5.0
            }
          }
          jMap.Locate.trackLocate(target, options)
          let geojsonPolylineMaterial = new PolylineAntialiasingMaterialProperty({
            color: Cesium.Color.fromCssColorString('#27E31E')
          })
          jMap._viewer.entities.getById('Locate_Track_trackedCar').polyline.material =
            geojsonPolylineMaterial
          carTracekd(newArr, newArr[newArr.length - 1].time)
        }
      }
    })
  }
}
const rebackValue = () => {
  valueSearch.value = ''
  dateValue.value = [new Date(), new Date()]
  window.jMap._viewer.camera.flyTo({
    destination: Cesium.Cartesian3.fromDegrees(
      121.48864277978112,
      31.109167646059344,
      6785.024122364054
    ), //摄像机的最终位置
    orientation: {
      heading: 6.213449611047205, //方位角
      pitch: -0.5254364393776036, //倾角
      roll: 6.283185307179586 //旋转角
    }
  })
  // window.jMap.switchBuildingModel('BM_qianlan_bai')
  clearCarTracked()
  clearpanelAll()
  carHandler.clearCarInterval()
}
//清楚轨迹
const clearCarTracked = () => {
  // if (carLineId.length != 0) {
  //   window.jMap.LightEffect.clearRoadLine(carLineId)
  //   carLineId = []
  // }
  // window.jMap.LightEffect.clearRoadLine(['trackedCar'])
  jMap.Locate.clearLocate(['trackedCar'])
  clearCarModel()
}
const ifNowTime = () => {
  if (nowIndex.value === 0) {
    nowIndex.value = 1
    if (valueSearch.value === '') {
      ElMessage.error('请选择车牌号')
      nowIndex.value = 0
    } else {
      // Http.carTracked({ carNumber: valueSearch.value }).then((res) => {
      //   if (res.code === 200) {
      //     if (res.result.length === 0) {
      //       ElMessage.error('该车辆定位信息未录入')
      //       nowIndex.value = 0
      //     } else {
      //       res.result[0].unique = '车辆视频'
      //       res.result[0].carNumber = valueSearch.value
      //       addPoint(res.result[0], {
      //         image: carPoint,
      //         size: { width: 30, height: 46 }
      //       })
      //       window.jMap._viewer.camera.flyTo({
      //         destination: Cesium.Cartesian3.fromDegrees(
      //           Number(res.result[0].gpslng) + 0.00890316689475,
      //           Number(res.result[0].gpslat) - 0.10298481288482,
      //           6785.024122362682
      //         ), //摄像机的最终位置
      //         orientation: {
      //           heading: 6.213330789804812, //方位角
      //           pitch: -0.5254364393776054, //倾角
      //           roll: 6.283185307179586 //旋转角
      //         }
      //       })
      //     }
      //   }
      // })
    }
  } else {
    nowIndex.value = 0
    clearPoint()
  }
}
const carnumChange = (e) => {
  clearpanelAll()
  // ifNowTime()
  generateCar()
}
// 车辆撒点
const generateCar = () => {
  Http.carTracked({ carNumber: valueSearch.value }).then((res) => {
    if (res.code === 200) {
      if (res.result.length === 0) {
        ElMessage.error('该车辆定位信息未录入')
        // nowIndex.value = 0
      } else {
        res.result[0].unique = '车辆视频'
        res.result[0].carNumber = valueSearch.value
        addPoint(res.result[0], {
          image: carPoint,
          size: { width: 30, height: 46 }
        })
        window.jMap._viewer.camera.flyTo({
          destination: Cesium.Cartesian3.fromDegrees(
            Number(res.result[0].gpslng) + 0.00890316689475,
            Number(res.result[0].gpslat) - 0.10298481288482,
            6785.024122362682
          ), //摄像机的最终位置
          orientation: {
            heading: 6.213330789804812, //方位角
            pitch: -0.5254364393776054, //倾角
            roll: 6.283185307179586 //旋转角
          }
        })
      }
    }
  })
}
</script>
<style lang="scss" scoped>
.carTracked {
  position: fixed;
  top: 300px;
  left: 2290px;
  display: flex;
  .carShow {
    width: 60px;
    height: 38px;
    background: url('@/assets/images/car/carShow.png') no-repeat;
    background-size: 100% 100%;
    transform: rotate(-90deg);
    cursor: pointer;
    &.active {
      transform: rotate(0deg) translateY(10px);
    }
  }
  .carContainer {
    width: 597px;
    height: 400px;
    background: url('@/assets/images/car/carBack.png') no-repeat;
    background-size: 100% 100%;
    position: relative;
    .realtime {
      position: absolute;
      top: 50px;
      right: 50px;
      width: 156px;
      height: 44px;
      background: url('@/assets/images/rubbish/correct_button.png') no-repeat;
      background-size: 100% 100%;
      text-align: center;
      line-height: 44px;
      font-size: 22px;
      cursor: pointer;
      &.active {
        height: 45px;
        background: url('@/assets/images/rubbish/correct_button_active.png') no-repeat;
        background-size: 100% 100%;
        font-weight: bold;
      }
    }
    .carTitle {
      font-size: 29px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      font-style: italic;
      color: #3ffff8;
      padding: 30px 0 0 100px;
    }
    .carNumber {
      display: flex;
      padding: 40px 0 0 60px;
      .carLabel {
        font-size: 22px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: #ffffff;
        margin-right: 23px;
        transform: translateY(15px);
      }
      .carSelect {
        :deep(.el-input__wrapper) {
          background-color: transparent;
          font-size: 18px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #ffffff;
          width: 380px;
          height: 60px;
          background: url('@/assets/images/car/carBack2.png') no-repeat;
          background-size: 100% 100%;
          border: none;
          .el-input__inner {
            color: #fff;
          }
        }
      }
    }
    .carTime {
      display: flex;
      padding: 30px 0 35px 38px;
      font-size: 22px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      color: #ffffff;
      .carLabel {
        margin-right: 23px;
        transform: translateY(18px);
      }
      .carDate {
        :deep(.el-input__wrapper) {
          background-color: transparent;
          font-size: 18px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #ffffff;
          width: 380px;
          height: 60px;
          background: url('@/assets/images/car/carBack2.png') no-repeat;
          background-size: 100% 100%;
          border: none;
          .el-input__inner {
            color: #000;
          }
        }
        :deep(.el-date-editor) {
          .el-range-input {
            font-size: 15px;
            color: #fff;
          }
          .el-range-separator {
            font-size: 15px;
            color: #fff;
            flex: 0;
          }
          .el-range__icon {
            display: none;
          }
          .el-range__close-icon {
            display: none;
          }
          .el-range-input {
            width: auto;
          }
        }
      }
    }
    .carButton {
      display: flex;
      font-size: 25px;
      font-family: shsc;
      font-weight: 400;
      color: #cefcff;
      padding: 0 50px;
      justify-content: space-around;
      .search,
      .back {
        width: 199px;
        height: 55px;
        background: url('@/assets/images/car/carSearch.png') no-repeat;
        background-size: 100% 100%;
        text-align: center;
        line-height: 55px;
        cursor: pointer;
      }
      .back {
        background: url('@/assets/images/car/carReback.png') no-repeat;
        background-size: 100% 100%;
      }
    }
  }
}
.carListsearch {
  width: 12px;
  height: 12px;
  // display: inline-block;
  border-radius: 50%;
  margin: 0 15px 0 0;
  float: left;
  transform: translateY(12px);
}
</style>
